<template>

  <div class="container">
    <h3 class="title">
      <svg-icon icon-class="nested"
                class="title-icon" />项目管理</h3>

    <el-card>
      <div slot="header">
        <span>收款配置</span>
      </div>
      <el-form :model="form"
               label-position="left"
               label-width="120px">
        <el-form-item label="配置维度:">
          <el-radio-group v-model="form.dimension">
            <el-radio :label="3">项目</el-radio>
            <el-radio :label="6">楼栋</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="项目名称:">
          <el-input v-model="form.projectName"
                    style="width:50%;"
                    placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="楼栋:">
          <el-button size="small">全选</el-button>
          <div>
            <el-button size="small">1栋</el-button>
            <el-button size="small">2栋</el-button>
          </div>
        </el-form-item>
        <el-form-item label="入账账号:"
                      style="margin-top: -1px;">
          <el-table :data="tableData"
                    border
                    style="width: 100%">
            <el-table-column prop="code"
                             label="序号"
                             width="180">
            </el-table-column>
            <el-table-column prop="fundMethod"
                             label="款项类型"
                             width="180">
            </el-table-column>
            <el-table-column prop="fundName"
                             label="款项名称">
            </el-table-column>
            <el-table-column label="入账银行">
              <template slot-scope="scope">
                <svg-icon icon-class="wechat"
                          class="title-icon"
                          v-if="scope.row.pay==1" />
              </template>

            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     @click="addDispose">新增配置</el-button>
          <el-button type="primary"
                     size="small"
                     @click="onNext">下一步</el-button>
          <el-button size="small"
                     @click="onCancle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>

  </div>

</template>

<script>

export default {
  name: "collection",
  data () {
    return {
      form: {
        dimension: '1',
        projectName: '',
        bindDevices: '',
        ipAddress: '',
        project: ''
      },
      tableData: [
        {
          code: 1,
          fundMethod: '非贷款类房款',
          fundName: '定金',
          pay: "1"
        },
        {
          code: 1,
          fundMethod: '非贷款类房款',
          fundName: '定金',
          pay: "1"
        }
      ]
    };
  },
  methods: {
    addDispose () {

    },
    onNext () { },
    onCancle () {

    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .title {
    font-size: 14px;
    font-weight: 400;
    .title-icon {
      font-size: 14px;
      display: inline-block;
      margin-right: 5px;
    }
  }
  /deep/ .el-card__header {
    border: 0 none;
  }
}
.title-small {
  font-size: 14px;
}

.money {
  color: #409eff;
}
</style>
